<!-- 地图视图 -->

<template>
  <div
    ref="view"
    class="MapLabel-MapView"
    v-bind="markViewProps"
    @mousedown="mouseDown"
    @mouseup="mouseUp"
    @mousemove="mouseMove"
    @mouseleave="mouseLeave"
    @mousewheel="mouseWheel"
    @contextmenu.prevent="CORE.doNothing"
  >
    <ViewBackground @loaded="toLoaded">
      <MarkGroup v-if="markObj" :obj="markObj" />
      <ViewGroup
        v-for="item in map_list"
        :key="item.id"
        :obj="item"
        :hide="(map_one.id === item.id && !map_visible) || !map_readyList"
        @edit="mouseMove"
      />
    </ViewBackground>

    <ViewName />

    <ViewRuler />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MapView from '@admin/views/Secure/mixMap/MapView'

// ============================== 导出组件 ============================== //

export default CORE.extend(MapView, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapView',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [...MapView.mixins, CORE.mixSelect('group', 'group_'), CORE.mixOne('group', 'group_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(MapView.components, require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...MapView.computed,

    /**
     * 标记视图的属性
     */
    markViewProps() {
      const { map_one, viewProps } = this
      const mark = map_one.labelGroupId ? ' Secure-MapView-inMark' : ''
      return { class: `${viewProps.class}${mark}` }
    },

    /**
     * 标记的对象
     */
    markObj() {
      const { map_one } = this
      if (!map_one.labelGroupId) return null

      const trans = (key) => map_one[key] && map_one[key] !== '0' ? +map_one[key].slice(0, -1) : null // 只有 % 前面的浮点数字
      const left = trans('longitude')
      const top = trans('latitude')
      const site = JSON.parse(map_one.siteJson)
      return { ...map_one, left, top, site }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...MapView.methods,

    /**
     * 鼠标按下
     */
    mouseDown({ srcElement, button, clientX, clientY }) {
      if (this.checkNoMove(srcElement)) return

      if (this.map_one.labelGroupId) return
      if (button === 0) this.transStart(clientX, clientY)
    },

    /**
     * 鼠标弹起
     */
    mouseUp({ button }) {
      if (this.map_one.labelGroupId) {
        button === 0 && this.toSubmit()
        button === 2 && this.map_setOne(this.map_info)
      } else {
        button === 0 && this.transStop()
        button === 1 && this.initTransScale()
        button === 2 && this.rotateStop()
      }
    },

    /**
     * 鼠标移动
     */
    mouseMove({ clientX, clientY }) {
      if (this.map_one.labelGroupId) {
        this.changeGroup(clientX, clientY)
      } else {
        this.inTrans && this.transDoing(clientX, clientY)
        this.inRotate && this.rotateDoing(clientX, clientY)
      }
    },

    /**
     * 鼠标离开
     */
    mouseLeave() {
      const { map_one, group_one } = this
      if (!map_one.labelGroupId || group_one.id) return

      Object.assign(map_one, { longitude: '', latitude: '' })
    },

    /**
     * 改变分组
     */
    changeGroup(clientX, clientY) {
      const { map } = this.$children[0].$refs
      const { width, height, top, left } = map.getBoundingClientRect()

      const x = clientX < left || clientX > left + width ? '' : `${(clientX - left) * 100 / width}%`
      const y = clientY < top || clientY > top + height ? '' : `${(clientY - top) * 100 / height}%`

      Object.assign(this.map_one, { longitude: x, latitude: y })
    },

    /**
     * 提交分组
     */
    toSubmit() {
      const { map_one: { id, labelGroupId } } = this

      // 修改
      if (id) {
        this.map_startEdit()
        return
      }

      // 新增
      const one = this.group_select.find((item) => item.id === labelGroupId)

      // 设置分组信息
      this.group_setOne(one)
      if (!one.properties) this.group_startOne()

      // 打开新增弹窗
      this.map_openAdd(this.map_one)
    },
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
